<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../resource/jquery-2.1.1.js"></script>
	<script src="../resource/highchart/highstock.src.js"></script>
</head>
<body>
<button id="btn">增加曲线</button>
<div class="chart" style="height: 500px;">

</div>
<script>
	$(function () {
		var dataset = [];

		dataset.push({
			name: "曲线1",
			data: []
		});
		dataset.push({
			name: "曲线2",
			data: []
		});
		dataset.push({
			name: "曲线3",
			data: []
		})
		for (var i = 0; i < 100; i++) {
			var date = new Date().getTime() + (100000 * i);

			dataset[0].data.push([
				date,
				Math.random() * 100
			])
			dataset[1].data.push([
				date,
				Math.random() * 100
			])
			dataset[2].data.push([
				date,
				Math.random() * 100
			])
		}



		$(".chart").highcharts({
			title: {
				text: ""
			},
			chart: {
				height: 300
			},
			credits: { enabled: false },
			rangeSelector: {
				buttons: [],
				inputEnabled: false,
				selected: 1,
				enabled: false
			},
			tooltip: {
				xDateFormat: '%Y-%m-%d %H:%M:%S',
				valueSuffix: '',
				crosshairs: true,
				shared: true
			},

			xAxis: {
				type: 'datetime',
				dateTimeLabelFormats: {
					second: '%H:%M:%S',
					minute: '%H:%M',
					hour: '%H:%M',
					day: '%Y-%m-%d',
					week: '%Y-%m-%d',
					month: '%Y-%m',
					year: '%Y'
				}
			},
			legend: {
				enabled: true,
				shadow: false
			},
			yAxis: [
				{
					title: {
						text: '温度'
					}
				}

			],
			series: dataset,
			plotOptions: {
				line: {
					connectNulls: true
				}
			}
		})

		$("#btn").on("click", function(){

			var dataset1 = {
				name: "曲线4",
				data: []
			};

			for (var i = 0; i < 100; i++) {
				var date = new Date().getTime() + (100000 * i);

				dataset1.data.push([
					date,
					Math.random() * 100
				])
			}
			var chart = $('.chart').highcharts();
			var series = chart.addSeries(dataset1);


		})
	});
</script>

</body>
</html>